<template>
  <!-- 组件中根节点只有一个 -->
  <div>
    <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="搜索">
        <el-input v-model="song" placeholder="歌曲" @keyup.enter.native="onSubmit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
          @row-click="rowClick"
          :data="songList"
          style="width: 900px;margin:0 auto">
        <el-table-column
            prop="songID"
            label="歌曲ID">
        </el-table-column>
        <el-table-column
            prop="songName"
            label="歌曲名">
        </el-table-column>
        <el-table-column
            prop="artistName"
            label="歌手名">
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
// import Vue from 'vue'

export default {
  data() {
    return {
      song: '',
      songList: []
    }
  },
  methods: {
    async onSubmit() {
      // 解构赋值
      const {data: res} = await this.$axios.get('/search', {params: {keywords: this.song}})
      this.songList = []
      for (let i = 0; i < 15; i++) {
        const obj = {
          songID: res.result.songs[i].id,
          songName: res.result.songs[i].name,
          artistName: res.result.songs[i].artists[0].name
        };
        this.songList.push(obj);
      }
      // forEach
      console.log(this.songList)
      this.song = '';
    },
    rowClick(row) {
      console.log(this)
      console.log(row.songID)
      this.$emit('getSongId', row.songID);
    }
  }
}
</script>

// scoped 使css仅限于当前文件有效
<style scoped>

</style>